$(function() {
	// let baseUrl = 'http://192.168.2.113:8081'	// 本地
	let baseUrl = 'https://www.qjmedianews.com/sys'  // 线上
	let token = JSON.parse(sessionStorage.getItem('user'))['accessToken'] || JSON.parse(sessionStorage.getItem('user'))['token']
	let obj1 = null
	let obj2 = null
	requestData('/index/find/media/data', res => {
		requestData('/index/find/media/info', res2 => {
			console.log(res, res2, 'rrrrrrr')
			obj1 = res
			obj2 = res2
			initEcharts()
		}, err => {
			initEcharts()
		})
	}, err => {
		requestData('/index/find/media/info', res3 => {
			obj2 = res3
			initEcharts()
		}, err => {
			initEcharts()
		})
	})
	function requestData(reqUrl, resolve, reject) {
		$.ajax({
			url: baseUrl + reqUrl,
			type: 'GET',
			headers: {
				Authorization: 'Bearer ' + token
			},
			// contentType: 'application/json;charset=UTF-8',
			// data: JSON.stringify({
			// 	// userName: phone,
			// 	// password: $(".pwd").val()
			// }),
			async: false,
			success: function(res) {
				// console.log(res, '成功')
				if (res.code == 200) {
					resolve(res.data)
				} else {
					reject()
				}
			},
			error: function(err) {
				console.log(err, '失败')
				reject()
			}
		})
	}
	
	function initEcharts() {
		// console.log(obj1.mediaVo.map(t => t.addPlanNum), 'obj1.mediaVo.map(t => t.addPlanNum)')
		$('.mediaMoney').text(obj2.insertMoney || 0)		// 媒体充值总额
		$('.mediaProfit').text(obj2.incomeMoney || 0)		// 媒体收益总额
		$('.registerUser').text(obj2.registerUser || 0)		// 日用户注册数
		$('.createMediaDay').text(obj2.createMediaDay || 0)	// 日创媒体数
		$('.createPlanDay').text(obj2.createPlanDay || 0)	// 日创广告位数
		$('.clickDayNum').text(obj2.clickDayNum || 0)		// 日点击数数
		
		echarts_1();
		echarts_2();
		echarts_4();
		echarts_31();
		echarts_32();
		echarts_33();
		echarts_5();
		echarts_6();
	}
	
	function echarts_1() {
		var myChart = echarts.init(document.getElementById('echart1'));

		option = {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			grid: {
				left: '0%',
				top: '10px',
				right: '0%',
				bottom: '4%',
				containLabel: true
			},
			xAxis: [{
				type: 'category',
				data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
				axisLine: {
					show: true,
					lineStyle: {
						color: "rgba(255,255,255,.1)",
						width: 1,
						type: "solid"
					},
				},

				axisTick: {
					show: false,
				},
				axisLabel: {
					interval: 0,
					// rotate:50,
					show: true,
					splitNumber: 15,
					textStyle: {
						color: "rgba(255,255,255,.6)",
						fontSize: '12',
					},
				},
			}],
			yAxis: [{
				type: 'value',
				axisLabel: {
					//formatter: '{value} %'
					show: true,
					textStyle: {
						color: "rgba(255,255,255,.6)",
						fontSize: '12',
					},
				},
				axisTick: {
					show: false,
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: "rgba(255,255,255,.1	)",
						width: 1,
						type: "solid"
					},
				},
				splitLine: {
					lineStyle: {
						color: "rgba(255,255,255,.1)",
					}
				}
			}],
			series: [{
					type: 'bar',
					data: obj1&&obj1.mediaVo? obj1.mediaVo.map(t => t.addMediaNum):[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
					barWidth: '35%', //柱子宽度
					// barGap: 1, //柱子之间间距
					itemStyle: {
						normal: {
							// color: '#2f89cf',
							color: new echarts.graphic.LinearGradient(
								0, 0, 0, 1,
								[
									{offset: 0, color: '#49FCB0'},                   //柱图渐变色
									// {offset: 0.5, color: '#44C0C1'},                 //柱图渐变色
									{offset: 1, color: '#37AEF1'},                   //柱图渐变色
								]
							),
							opacity: 1,
							barBorderRadius: 2,
						}
					}
				}

			]
		};
		myChart.setOption(option);
		window.addEventListener("resize", function() {
			myChart.resize();
		});
	}

	function echarts_2() {
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('echart2'));

		option = {
			//  backgroundColor: '#00265f',
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			grid: {
				left: '0%',
				top: '10px',
				right: '0%',
				bottom: '4%',
				containLabel: true
			},
			xAxis: [{
				type: 'category',
				data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
				axisLine: {
					show: true,
					lineStyle: {
						color: "rgba(255,255,255,.1)",
						width: 1,
						type: "solid"
					},
				},

				axisTick: {
					show: false,
				},
				axisLabel: {
					interval: 0,
					show: true,
					splitNumber: 15,
					textStyle: {
						color: "rgba(255,255,255,.6)",
						fontSize: '12',
					},
				},
			}],
			yAxis: [{
				type: 'value',
				axisLabel: {
					show: true,
					textStyle: {
						color: "rgba(255,255,255,.6)",
						fontSize: '12',
					},
				},
				axisTick: {
					show: false,
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: "rgba(255,255,255,.1	)",
						width: 1,
						type: "solid"
					},
				},
				splitLine: {
					lineStyle: {
						color: "rgba(255,255,255,.1)",
					}
				}
			}],
			series: [{

					type: 'bar',
					data: obj1&&obj1.planVo? obj1.planVo.map(t => t.addPlanNum):[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
					barWidth: '35%',
					itemStyle: {
						normal: {
							// color: '#27d08a',
							color: new echarts.graphic.LinearGradient(
								0, 0, 0, 1,
								[
									{offset: 0, color: '#E287F5'},                   //柱图渐变色
									// {offset: 0.5, color: '#44C0C1'},                 //柱图渐变色
									{offset: 1, color: '#686CFB'},                   //柱图渐变色
								]
							),
							opacity: 1,
							barBorderRadius: 2,
						}
					}
				}

			]
		};

		myChart.setOption(option);
		window.addEventListener("resize", function() {
			myChart.resize();
		});
	}

	function echarts_5() {
		var myChart = echarts.init(document.getElementById('echart5'));
		option = {

			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},

			grid: {
				left: '0%',
				top: '10px',
				right: '0%',
				bottom: '2%',
				containLabel: true
			},
			xAxis: [{
				type: 'category',
				data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
				axisLine: {
					show: true,
					lineStyle: {
						color: "rgba(255,255,255,.1)",
						width: 1,
						type: "solid"
					},
				},

				axisTick: {
					show: false,
				},
				axisLabel: {
					interval: 0,
					// rotate:50,
					show: true,
					splitNumber: 15,
					textStyle: {
						color: "rgba(255,255,255,.6)",
						fontSize: '12',
					},
				},
			}],
			yAxis: [{
				type: 'value',
				axisLabel: {
					//formatter: '{value} %'
					show: true,
					textStyle: {
						color: "rgba(255,255,255,.6)",
						fontSize: '12',
					},
				},
				axisTick: {
					show: false,
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: "rgba(255,255,255,.1	)",
						width: 1,
						type: "solid"
					},
				},
				splitLine: {
					lineStyle: {
						color: "rgba(255,255,255,.1)",
					}
				}
			}],
			series: [{
				type: 'bar',
				data: obj1&&obj1.userVo? obj1.userVo.map(t => t.addUserNum):[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
				barWidth: '35%',
				itemStyle: {
					normal: {
						// color: '#2f89cf',
						color: new echarts.graphic.LinearGradient(
							0, 0, 0, 1,
							[
								{offset: 0, color: '#F9BB4E'},                   //柱图渐变色
								// {offset: 0.5, color: '#44C0C1'},                 //柱图渐变色
								{offset: 1, color: '#F8872E'},                   //柱图渐变色
							]
						),
						opacity: 1,
						barBorderRadius: 2,
					}
				}
			}]
		};
		myChart.setOption(option);
		window.addEventListener("resize", function() {
			myChart.resize();
		});
	}

	function echarts_4() {
		var myChart = echarts.init(document.getElementById('echart4'));

		option = {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					lineStyle: {
						color: '#dddc6b'
					}
				}
			},
			legend: {
				top: '0%',
				data: ['媒体', '广告位'],
				textStyle: {
					color: 'rgba(255,255,255,.5)',
					fontSize: '12',
				}
			},
			grid: {
				left: '10',
				top: '30',
				right: '10',
				bottom: '10',
				containLabel: true
			},

			xAxis: [{
				type: 'category',
				boundaryGap: false,
				axisLabel: {
					textStyle: {
						color: "rgba(255,255,255,.6)",
						fontSize: 12,
					},
				},
				axisLine: {
					lineStyle: {
						color: 'rgba(255,255,255,.2)'
					}

				},

				data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']

			}, {

				axisPointer: {
					show: false
				},
				axisLine: {
					show: false
				},
				position: 'bottom',
				offset: 20,



			}],

			yAxis: [{
				type: 'value',
				axisTick: {
					show: false
				},
				axisLine: {
					lineStyle: {
						color: 'rgba(255,255,255,.1)'
					}
				},
				axisLabel: {
					textStyle: {
						color: "rgba(255,255,255,.6)",
						fontSize: 12,
					},
				},

				splitLine: {
					lineStyle: {
						color: 'rgba(255,255,255,.1)'
					}
				}
			}],
			series: [{
					name: '媒体',
					type: 'line',
					smooth: true,
					symbol: 'circle',
					symbolSize: 5,
					showSymbol: false,
					lineStyle: {

						normal: {
							color: '#37AEF1',
							width: 2
						}
					},
					areaStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: 'rgba(1, 132, 213, 0.4)'
							}, {
								offset: 0.8,
								color: 'rgba(1, 132, 213, 0.1)'
							}], false),
							shadowColor: 'rgba(0, 0, 0, 0.1)',
						}
					},
					itemStyle: {
						normal: {
							color: '#37AEF1',
							borderColor: 'rgba(221, 220, 107, .1)',
							borderWidth: 12
						}
					},
					data: obj1&&obj1.mediaVo? obj1.mediaVo.map(t => t.addMediaNum):[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
				},
				{
					name: '广告位',
					type: 'line',
					smooth: true,
					symbol: 'circle',
					symbolSize: 5,
					showSymbol: false,
					lineStyle: {
						normal: {
							color: '#49FCB0',
							width: 2
						}
					},
					areaStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: 'rgba(0, 216, 135, 0.4)'
							}, {
								offset: 0.8,
								color: 'rgba(0, 216, 135, 0.1)'
							}], false),
							shadowColor: 'rgba(0, 0, 0, 0.1)',
						}
					},
					itemStyle: {
						normal: {
							color: '#49FCB0',
							borderColor: 'rgba(221, 220, 107, .1)',
							borderWidth: 12
						}
					},
					data: obj1&&obj1.planVo? obj1.planVo.map(t => t.addPlanNum):[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
				},

			]

		};
		myChart.setOption(option);
		window.addEventListener("resize", function() {
			myChart.resize();
		});
	}

	function echarts_6() {
		var myChart = echarts.init(document.getElementById('echart6'));

		window.addEventListener("resize", function() {
			myChart.resize();
		});
	}

	function echarts_31() {
		var myChart = echarts.init(document.getElementById('fb1'));
		option = {

			title: [{
				text: '提现/未提现',
				left: 'center',
				textStyle: {
					color: '#fff',
					fontSize: '16'
				}

			}],
			tooltip: {
				trigger: 'item',
				formatter: "{a} <br/>{b}: {c} ({d}%)",
				position: function(p) {
					return [p[0] + 10, p[1] - 10];
				}
			},
			legend: {

				top: '70%',
				itemWidth: 10,
				itemHeight: 10,
				data: ['已提现', '未提现'],
				textStyle: {
					color: 'rgba(255,255,255,.5)',
					fontSize: '12',
				}
			},
			series: [{
				// name: '金额比例',
				name: '数量比例',
				type: 'pie',
				center: ['50%', '42%'],
				radius: ['40%', '60%'],
				color: ['#37AEF1', '#49FCB0'],
				label: {
					show: false
				},
				labelLine: {
					show: false
				},
				data: [{
						value: obj2.notTiXian || 0,
						name: '未提现'
					},
					{
						value: obj2.tiXian || 0,
						name: '已提现'
					}
				]
			}]
		};
		myChart.setOption(option);
		window.addEventListener("resize", function() {
			myChart.resize();
		});
	}

	function echarts_32() {
		var myChart = echarts.init(document.getElementById('fb2'));
		option = {

			title: [{
				text: '媒体/广告位',
				left: 'center',
				textStyle: {
					color: '#fff',
					fontSize: '16'
				}

			}],
			tooltip: {
				trigger: 'item',
				formatter: "{a} <br/>{b}: {c} ({d}%)",
				position: function(p) {
					return [p[0] + 10, p[1] - 10];
				}
			},
			legend: {

				top: '70%',
				itemWidth: 10,
				itemHeight: 10,
				data: ['媒体', '广告位'],
				textStyle: {
					color: 'rgba(255,255,255,.5)',
					fontSize: '12',
				}
			},
			series: [{
				name: '',
				type: 'pie',
				center: ['50%', '42%'],
				radius: ['40%', '60%'],
				color: ['#6B6CFB', '#E087F5'],
				label: {
					show: false
				},
				labelLine: {
					show: false
				},
				data: [{
						value: obj2.mediaNum || 0,
						name: '媒体'
					},
					{
						value: obj2.planNum || 0,
						name: '广告位'
					}
				]
			}]
		};
		myChart.setOption(option);
		window.addEventListener("resize", function() {
			myChart.resize();
		});
	}

	function echarts_33() {
		var myChart = echarts.init(document.getElementById('fb3'));
		option = {
			title: [{
				text: '充值/收益',
				left: 'center',
				textStyle: {
					color: '#fff',
					fontSize: '16'
				}

			}],
			tooltip: {
				trigger: 'item',
				formatter: "{a} <br/>{b}: {c} ({d}%)",
				position: function(p) {
					return [p[0] + 10, p[1] - 10];
				}
			},
			legend: {
				top: '70%',
				itemWidth: 10,
				itemHeight: 10,
				data: ['充值金额', '收益金额'],
				textStyle: {
					color: 'rgba(255,255,255,.5)',
					fontSize: '12',
				}
			},
			series: [{
				name: '充值/收益',
				type: 'pie',
				center: ['50%', '42%'],
				radius: ['40%', '60%'],
				color: ['#F9BB4E', '#2E9BF8'],
				label: {
					show: false
				},
				labelLine: {
					show: false
				},
				data: [{
						value: obj2.insertMoney || 0,
						name: '充值金额'
					},
					{
						value: obj2.incomeMoney || 0,
						name: '收益金额'
					},
				]
			}]
		};
		myChart.setOption(option);
		window.addEventListener("resize", function() {
			myChart.resize();
		});
	}


})
